<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {LocationQuery, LocationQueryValue, useRoute, useRouter} from 'vue-router'
import {Lock, User, CircleCheckFilled} from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'
import useWhStore from "@/store/useWhStore";
import useUserStore from "@/store/useUserStore";

const formRef = ref();

const whStore = useWhStore()
const userStore = useUserStore()

const formInline = reactive({
  isLoading: false,
  loginName: '',
  password: '',
  whId: undefined,
});

const rules = {
  loginName: {required: true, message: '用户名必填', trigger: 'blur'},
  password: {required: true, message: '密码必填', trigger: 'blur'},
  whId: {required: true, message: '请输选择仓库', trigger: 'blur'},
};

const router = useRouter();
const route = useRoute()

function handleSubmit() {
  formRef.value.validate((valid, fields) => {
    if (!valid) {
      return;
    }
    userStore.login(formInline).then(data => {
      userStore.getUserData().then(() => {
        // 跳转
        const query: LocationQuery = route.query;
        const redirect = (query.redirect as LocationQueryValue) ?? "/";

        const otherQueryParams = Object.keys(query).reduce(
            (acc: any, cur: string) => {
              if (cur !== "redirect") {
                acc[cur] = query[cur];
              }
              return acc;
            },
            {}
        );

        router.push({path: redirect, query: otherQueryParams});
        // alert('登录成功, 跳转没做')

      }).catch((e) => {
        ElMessage({showClose: true, message: '获取用户信息失败 ' + e, type: 'error',})
      });


    }).catch((e) => {
      ElMessage({showClose: true, message: '登录失败 ' + e, type: 'error',})

    })

  })
};

onMounted(() => {
  whStore.reload()
});
</script>

<template>
  <div class="view-account">
    <div class="view-account-header"></div>
    <div class="view-account-container">
      <div class="view-account-top">
        <div class="view-account-top-logo">
          <img src="../assets/logo.png" alt=""/>
        </div>
        <div class="view-account-top-desc">
          WMS 8.5
        </div>
      </div>
      <div class="view-account-form">
        <el-form
            ref="formRef"
            label-placement="left"
            size="large"
            :model="formInline"
            :rules="rules"
        >
          <el-form-item prop="loginName">
            <el-input v-model="formInline.loginName" placeholder="请输入用户名">
              <template #prefix>
                <el-icon size="18" color="#808695">
                  <User/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
                v-model="formInline.password"
                type="password"
                placeholder="请输入密码"
            >
              <template #prefix>
                <el-icon size="18" color="#808695">
                  <Lock/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="whId">
            <el-select
                v-model="formInline.whId"
                placeholder="选择仓库"
                :loading="whStore.loading"
                style="width:100%"
                filterable
                clearable
            >
              <el-option v-for="item in whStore.whList"
                         :key="item.wh_id"
                         :label="item.wh_name"
                         :value="item.wh_id"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit" size="large" :loading="userStore.loading">
              <template #icon>
                <el-icon>
                  <CircleCheckFilled/>
                </el-icon>
              </template>
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.view-account {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;

  &-container {
    flex: 1;
    padding: 32px 12px;
    max-width: 384px;
    min-width: 320px;
    margin: 0 auto;
  }

  &-top {
    padding: 32px 0;
    text-align: center;

    &-desc {
      font-size: 14px;
      color: #808695;
    }
  }

  &-other {
    width: 100%;
  }

  .default-color {
    color: #515a6e;

    .ant-checkbox-wrapper {
      color: #515a6e;
    }
  }
}

@media (min-width: 768px) {
  .view-account {
    background-image: url('../assets/login.svg');
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;
  }

  .page-account-container {
    padding: 32px 0 24px 0;
  }
}
</style>
